<!DOCTYPE html>
<html>
<head>
  <title>Hound Test Page</title>
  <style type="text/css">
    .container {
      display: block;
    }

    .example {
      width: 400px;
      height: 100px;
    }

    .hidden-element {
      display: none;
    }
  </style>
</head>
<body>
  <div class="container">
    <p class="example" data-greeting="hello">Paragraph</p>
    <p class="another_example another_class">Another Paragraph</p>
  </div>

  <div class="hidden-element">This is hidden</div>

  <p>Out of container paragraph</p>

  <form action="page2.html" method="post">
    <input type="text" name="username"/>
    <input type="text" name="promocode" disabled/>

    <p>
      <input type="checkbox" name="superpower" id="speed-flying" value="flying"/>Flying
      <br/>
      <input type="checkbox" name="superpower" id="speed-superpower" value="speed"/>Speed
    </p>


    <p>
      <input type="radio" name="favourite_fruit" value="Apple"/>Apple
      <br/>
      <input type="radio" name="favourite_fruit" value="Custard Apple"/>Custard Apple
    </p>

    <input type="submit" class="submit-form"/>
  </form>


  <div class="hidden-wrapper">
    <p class="hidden-element">This is hidden</p>
  </div>

  <div id="mouse-actions">
    I need action
  </div>

  <iframe width=300 height=300 src="iframe.html"></iframe>
  <div id="javascript"></div>
  <script>
    setTimeout(function (){
      document.getElementById("javascript").innerHTML = "Javascript!";
    }, 500);

    var mouseActions = document.getElementById("mouse-actions")

    mouseActions.onmouseover = function() {
      mouseActions.innerHTML = "Mouse over"
    }

    mouseActions.onmousedown = function() {
      mouseActions.innerHTML = "Mouse down"
    }

    mouseActions.onmouseup = function() {
      mouseActions.innerHTML = "Mouse up"
    }
  </script>
</body>
</html>
